<template>
  <div class="p-bbox" >
    <div class="mask" @click="close"></div>
    <div class="fl-con">
      <div class="el-dialog__title fl-con-t">文件下载</div>
      <div class="fl-con-c">
        <div class="empty" v-if="fileList.length==0">没有文件可下载</div>
        <div v-else class="iiteem" v-for="(item,index) in fileList" :key="index" @click="download(item.url,item.name)">
          <img :src="getImg(item.name)" alt="">
          <span>{{nameFormat(item.name)}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadFile } from "@/api/smartParks/environment/opmEnvRule";
export default {
  name: "FileDownPop",
  props:{
    fileList: {
      type: Array,
      default: [],
    }
  },
  data(){
    return{
      fileIcon:{
        png:require("@/assets/icons/png/png.png"),
        pdf:require("@/assets/icons/png/pdf.png"),
        txt:require("@/assets/icons/png/txt.png"),
        file:require("@/assets/icons/png/file.png")
      }
    }
  },
  created() {

  },
  methods:{
    close(){
      this.$emit("close")
    },
    nameFormat(name){
      if (this.isEmpty(name))return;
      let len=name.length
      if (len.length<12){
        return
      }else {
        let type=this.getType(name)
        let lastLen=type.length
        let leftLen=len-lastLen
        let leftSub=leftLen<6?leftLen:6
        let left=name=name.substring(0,leftSub)
        if (leftSub<6){
          return left+type;
        }else {
          return left+"..."+type;
        }
      }

    },
    getImg(name){
      let type=this.getType(name)
      if (type=="jpg"||type==="jpeg"||type=="png"){
        return this.fileIcon.png
      }else if (type=="pdf"){
        return this.fileIcon.pdf
      }else if (type=="xls"||type=="xlsx"||type=="docx"){
        return this.fileIcon.txt
      } else {
        return this.fileIcon.file
      }
    },
    getType(file){
      let filename=file;
      let index1=filename.lastIndexOf(".");
      let index2=filename.length;
      let type=filename.substring(index1+1,index2);
      return type;
    },
    download (url,fileName) {
      if(this.isEmpty(url)){
        return
      }
      let index = fileName.indexOf(".");
      let name = fileName.slice(0, index);
      downloadFile(url, name)
    },
    downloadURL(url) {
      window.open(url)
      // let link = document.createElement('a');
      // link.style.display = 'none';
      // link.href = url;
      // document.body.appendChild(link);
      // link.click();
      // document.body.removeChild(link);
    }

  }
}
</script>

<style scoped lang="scss">
.p-bbox{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.4);
  }

  .fl-con{
    width: 50%;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 20px 30px 0px;

    .fl-con-t{
      margin-bottom: 8px;
      width: 100%;
    }

    .fl-con-c{
      margin-top: 16px;
      padding: 18px 0;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
    }
    .empty{
      color: #999;
      font-size: 16px;
      display: block;
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: center;
    }

    .iiteem{
      width: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #666;
      margin-bottom: 30px;
      margin-right: 14px;

      &:hover{
        cursor: pointer;
      }

      img{
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
      }
      span{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-wrap: nowrap;
        display: flex;
        justify-content: center;
      }
    }
  }
}
</style>
